<template>
    <mrc_ess_Popover :transition="mobile ? 'slide-y-transition' : 'scale-transition'" :contentClass="mobile ? 'mobile-content-popover-class' : ''" :scrim="mobile" ref="mrcEssPopover" :location="props.location" :openOnHover="props.openOnHover"
        @open="handleOpen" @close="handleClose">
        <template v-slot:btn>
            <slot name="btn">
                Popover
            </slot>
        </template>
        <template v-slot:default>
            <v-card class="pl-4 pr-4 pt-4 pb-4 box-light-shadow">
                <div :class="mobile ? 'flex align-center justify-between' : ''">
                    <div class="text-[16px] font-[700] leading-[22px]" :class="mobile ? '' : 'mb-2'" v-if="leftLabel">{{ $t(props.leftLabel) }}:</div>
                    <div class="flex align-center">
                        <!-- 数字输入框 -->
                        <mrc_ess_NumInput :maxNumber="100" v-model="nums" innerClass="max-w-[100px]"></mrc_ess_NumInput>
                        <!-- 确认按钮 -->
                        <v-btn @click="handleConfirm" color="secondary"
                            class="ml-2 !w-[34px] !h-[34px] !min-w-[auto] !min-h-[auto] !shadow-none">
                            <svg-icon iconClass="check-white" size="20"></svg-icon>
                        </v-btn>
                    </div>
                </div>
            </v-card>
        </template>
    </mrc_ess_Popover>
</template>

<script lang="ts" setup>
// 当前是否是手机端
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
import { ref, watch } from 'vue';
const mrcEssPopover = ref();
const props = defineProps({
    leftLabel: {
        type: String,
        default: "Weight:"
    },
    modelValue: {
        type: [Number, String],
    },
    openOnHover: {
        type: Boolean,
        default: false
    },
    autoEmit: {
        type: Boolean,
        default: false
    },
    location: {
        type: String,
        default: "bottom center"
    }
})
const emit = defineEmits(["update:modelValue", "open", "close", "confirm"]);
const nums = ref(Number(String(props.modelValue).replace(/[^\d]/g, "")));
watch(nums, (value) => {
    if (props.autoEmit) {
        emit("update:modelValue", value);
    }
})
watch(() => props.modelValue, (val) => {
    nums.value = Number(String(props.modelValue).replace(/[^\d]/g, ""));
}, {
    immediate: true
})
function handleOpen() {
    // 每次打开重新渲染值
    nums.value = Number(String(props.modelValue).replace(/[^\d]/g, ""));
    emit("open");
}
function handleClose() {
    emit("close");
}
/**
 * 点击确认
 */
function handleConfirm(event: PointerEvent) {
    mrcEssPopover.value.close();
    emit('confirm', event);
    emit("update:modelValue", nums.value);
}
</script>

<style>
    .mobile-content-popover-class {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
    }
    .mobile-content-popover-class .my-popover-content-inner {
        margin: 0 !important;
    }
    .mobile-content-popover-class .my-popover-content-inner .v-card{
        border-radius: 0 !important;
        padding-bottom: 24px !important;
    }
</style>
